<!--
 * @Author: 
 * @Date: 2021-03-11 13:51:45
 * @Description: 表单操作顶栏。保存等按钮
 * 该操作栏只能用于直接页面，即ele-body内。而不是弹框等内
-->
<template>
  <div
    class="ele-tool-bar"
    :style="{ top: `${offsetTop}px`, left: `${offsetLeft}px` }"
  >
    <slot name="content"></slot>
    <slot></slot>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
const elementResizeDetectorMaker = require("element-resize-detector");
export default {
  name: "ToolBar",
  data() {
    return {
      offsetTop: 0,
      offsetLeft: 0
    };
  },
  computed: {
    ...mapGetters(["navigateType"])
  },
  watch: {
    navigateType() {
      this.initResize();
    }
  },
  mounted() {
    this.initResize();
  },
  methods: {
    // 初始化操作栏
    initResize() {
      // 左侧菜单
      const leftEl = document.getElementsByClassName("el-aside")[0];
      // 左侧根节点
      const rootLeftEl = document.getElementsByClassName(
        "ele-aside-root-left"
      )[0];
      // 主体内容
      const topEl = document.getElementsByClassName("ele-body")[0];

      const leftElWidth = leftEl.offsetWidth;
      if (leftElWidth != 0 && leftElWidth != undefined) {
        // 有左侧
        var erd = elementResizeDetectorMaker();
        const self = this;
        erd.listenTo(leftEl, function (element) {
          var width = element.offsetWidth;
          self.$nextTick(function () {
            const rootLeftWidth = rootLeftEl.offsetWidth;
            const rootLeftOffsetWidth = rootLeftWidth ? rootLeftWidth : 0;
            self.offsetLeft = width + rootLeftOffsetWidth;
            self.offsetTop = topEl.offsetTop;
          });
        });
      } else {
        // 无左侧。则是顶bar
        this.offsetLeft = leftElWidth;
        this.offsetTop = topEl.offsetTop;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ele-tool-bar {
  height: $tooBarHeight;
  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.1);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 15px;
  position: fixed;
  z-index: 4;
  right: 0;
}
</style>